<template>
  <div>
    <div class="mark">播放界面-{{ id }}</div>
    <div class="info">
      <img :src="imgUrl" alt="" />
      <div class="name">{{ name }}</div>
    </div>
    <!-- 歌曲列表 -->
    <div class="content">
            <div class="desc">歌曲列表</div>
        </div>
    <!-- <MusicList :List="List" :isShow="true"> </MusicList> -->
    <MusicList :List="List">
        <template #num="obj">
            <div class="num">{{obj.index+1}}</div>
        </template>
         </MusicList>
  </div>
</template>

<script>
import MusicList from "@/components/MusicList";
export default {
  name: "PlayList",
  components: { MusicList },
  props: ["id"],
  data() {
    return {
      name: "",
      imgUrl: "",
      List: [],
    };
  },
  created() {
    this.getPlayList();
  },
  methods: {
    async getPlayList() {
      let res = await this.$api.playList();
      this.name = res.data.playlist.name;
      this.imgUrl = res.data.playlist.coverImgUrl;
      this.List = res.data.playlist.tracks;
    },
  },
};
</script>

<style lang="less" scoped>
.info {
  padding: 0.3rem;
  background: #eee;
  display: flex;
  img {
    width: 2.5rem;
  }
  .name {
    flex: 1;
    padding-left: 0.2rem;
  }
}
.content {
  .desc {
    color: #666;
    font-size: 12px;
    background-color: #eeeff0;
    padding: 0 0.2rem;
  }}
</style>
